<template>
    <div>
        <p class="p1" @click="$router.push('/')">x</p>
        <van-field @input="register" v-model="phone" size="large" required label="手机号" placeholder="请输入手机号" :error-message="err" />
        <van-button @click="go" type="primary">获取验证码</van-button>
        <!-- <van-field v-model="tel" type="tel" label="手机号" /> -->
        <router-link to="/login">已有账号????</router-link>
    </div>
</template>

<script>
export default {
    data() {
        return {
            phone: "",
            err: "",
            boo:false
        };
    },
    methods: {
        register() {
            this.boo = this.phone.length == 11;
            // console.log(boo);
            if (this.boo) {
                this.err = "";
            } else {
                this.err = "请输入正确的手机号";
            }
        },
        async go(){
            if (this.boo) {
              let data  = await  this.$API.RegisterAPI.GetRegisterPhone({phone:this.phone})
                console.log(data);
                if (data.code==0) {
                    Toast.success('注册成功');
                    this.$router.push('/login')
                }
            }else{
                this.err = "请输入手机号";
            }
        }
    },
};
</script>

<style lang="scss" scoped>
.p1 {
    font-size: 0.8rem;
}
.van-field {
    padding: 0;
    ::v-deep input {
        border-bottom: 0.01rem solid green;
    }
    // ::v-deep span{
    //     // height: 0.8rem;
    //     line-height: 0.8rem;
    //     font-size: 0.2rem;
    // }
}
</style>